<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link th:href="@{/frame/layui/css/layui.css}" rel="stylesheet">
</head>
<body>
<div class="layui-fluid">
    <table id="customertable" lay-filter="customertable"></table>
</div>
<script type="text/javascript" th:src="@{/frame/layui/layui.js}"></script>
<script id="showAvatar" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="avartatPreview">查看头像</a>
</script>
<script id="switchTpl" type="text/html">
    <input type="checkbox" name="status" value="{{d.phone}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="bancustomer"
           {{ d.status== '正常' ? 'checked' : '' }}>
</script>
<script>
    layui.use(['table', 'layer'], function () {
        const table = layui.table;
        const $ = layui.$;
        const form = layui.form;
        table.render({
            // 绑定的table元素
            elem: '#customertable'
            // 开启右侧工具栏
            ,toolbar:true
            // 异步数据接口
            , url: '[[@{/customer/admin/getAllCustomer}]]'
            // 访问方式
            , method: 'post'
            // 分页切换时显示加载层
            , loading: true
            // 分页请求参数名
            , request: {
                pageName: 'index',
                limitName: 'pageSize'
            }
            // 开启分页
            , page: true
            // 表格标题
            , title: '用户列表'
            , cols: [ [
                // {align: 'center', type: 'checkbox', fixed: 'left'},
                {align: 'center', field: 'phone', title: '手机号'},
                {align: 'center', field: 'username', title: '昵称'},
                {align: 'center', field: 'email', title: '邮箱'},
                {align: 'center', field: 'gender', title: '性别'},
                {align: 'center', field: 'avatar', title: '头像', templet: '#showAvatar'},
                {align: 'center', field: 'signature', title: '个性签名'},
                {align: 'center', field: 'registertime', title: '注册时间',templet:"<div>{{layui.util.toDateString(d.registertime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"},
                {align: 'center', field: 'integral', title: '积分'},
                {align: 'center', field: 'status', title: '状态', templet: '#switchTpl'}
            ] ]
        });
        form.on('switch(bancustomer)', function (obj) {
            // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            $.post('[[@{/customer/admin/changeStatus}]]', {
                phone: this.value,
                status: obj.elem.checked ? '正常' : '禁用'
            }, function (res) {
                layer.msg(res.msg);
            });
        });

        // 行工具栏事件
        table.on('tool(customertable)', function (obj) {
            const data = obj.data;
            switch (obj.event) {
                case 'avartatPreview':
                    layer.photos({
                        photos: {title: "查看图标", data: [{src: '[[@{/picture/getAvatar}]]?fileName='+data.avatar}]},
                        shade: .01,
                        closeBtn: 1,
                        anim: 5
                    });
                    break;
            }
        });
    });
</script>
</body>
</html>